import styled from 'styled-components'

export const InfoWrapper = styled.div`
	width: 850px;
	height: 66px;

	.inner {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		border: 1px solid #ddd;
		background: #fff;
		border-radius: 32px;
		position: relative;

		.item {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			border-radius: 32px;
			cursor: pointer;

			.slicer {
				width: 1px;
				height: 30px;
				background: #ddd;
			}

			.content {
				font-size: 12px;
				padding-left: 30px;

				.title {
					font-weight: 800;
					margin-bottom: 6px;
				}

				.desc {
					color: #666;
				}
			}

			&:hover {
				background: #ebebeb;
			}
		}

		.icon {
			position: absolute;
			right: 12px;
			width: 50px;
			height: 50px;
			color: #fff;
			border-radius: 50%;
			cursor: pointer;
			background: ${props => props.theme.color.primaryColor};

			display: flex;
			align-items: center;
			justify-content: center;

			&:hover {
				background: #e21b5f;
			}
		}
	}
`
